<template>
  <view class="custom-nav-wrapper">
    <uni-nav-bar
      fixed
      statusBar
      :title="displayTitle"
      :left-icon="showBack ? 'left' : ''"
      :border="border"
      :backgroundColor="backgroundColor"
      :color="color"
      @clickLeft="handleBack"
      :height="0"
    >
      <view slot="left"><slot name="left" /></view>
      <!-- #ifdef MP-WEIXIN -->
      <view slot="right" class="mp-right-slot" :style="rightSlotStyle">
        <slot name="right" />
      </view>
      <!-- #endif -->
      
      <!-- #ifdef H5 -->
      <view slot="right"><slot name="right" /></view>
      <!-- #endif -->

      <!-- #ifdef MP-WEIXIN -->
      <view class="mp-title" v-if="title">
        {{ title }}
      </view>
      <!-- #endif -->
      <slot />
    </uni-nav-bar>
  </view>
  
</template>

<script>
export default {
  name: 'CustomNavBar',
  props: {
    title: { type: String, default: '' },
    showBack: { type: Boolean, default: true },
    autoBack: { type: Boolean, default: true },
    border: { type: Boolean, default: false },
    backgroundColor: { type: String, default: '#383838' },
    color: { type: String, default: '#ffffff' },
    fallbackTabUrl: { type: String, default: '/pages/home/index' }
  },
  data() {
    return {
      // #ifdef MP-WEIXIN
      capsuleInfo: {
        width: 0,
        height: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      statusBarHeight: 0,
      navBarHeight: 44
      // #endif
    }
  },
  computed: {
    displayTitle() {
      // #ifdef MP-WEIXIN
      // 在小程序模式下，通过插槽显示 title，这里传空字符串避免重复
      return '';
      // #endif
      
      // #ifndef MP-WEIXIN
      return this.title;
      // #endif
    },
    // #ifdef MP-WEIXIN
    customNavStyle() {
      return {
        height: `${this.navBarHeight}px`,
        paddingTop: `${this.statusBarHeight}px`
      }
    },
    titleStyle() {
      return {
        top: `${this.statusBarHeight + this.navBarHeight / 2}px`
      }
    },
    rightSlotStyle() {
      // 如果胶囊信息还未获取到，使用默认的安全边距
      const capsuleWidth = this.capsuleInfo.width || 87; // 胶囊默认宽度约87px
      return {
        marginRight: `${capsuleWidth + 16}px` // 胶囊宽度 + 16px 安全边距
      }
    }
    // #endif
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.initCapsuleInfo();
    // #endif
  },
  methods: {
    // #ifdef MP-WEIXIN
    initCapsuleInfo() {
      try {
        // 获取系统信息
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 0;
        
        // 获取胶囊按钮信息
        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        if (menuButtonInfo) {
          this.capsuleInfo = {
            width: menuButtonInfo.width,
            height: menuButtonInfo.height,
            top: menuButtonInfo.top,
            right: menuButtonInfo.right,
            bottom: menuButtonInfo.bottom
          };
          
          // 计算导航栏高度，确保不被胶囊遮挡
          const capsuleTop = menuButtonInfo.top;
          const capsuleHeight = menuButtonInfo.height;
          const statusBarHeight = this.statusBarHeight;
          
          // 导航栏高度 = 胶囊底部到状态栏底部的距离
          this.navBarHeight = capsuleTop - statusBarHeight + capsuleHeight + 8; // 8px 为安全边距
        }
      } catch (e) {
        console.error('获取胶囊信息失败:', e);
        // 使用默认值
        this.statusBarHeight = 20;
        this.navBarHeight = 44;
      }
    },
    // #endif
    handleBack() {
      if (!this.showBack) return;
      // 先抛出 goBack 事件，供上层接管
      this.$emit('goBack');
      if (!this.autoBack) return;
      const pages = getCurrentPages();
      if (pages && pages.length > 1) {
        uni.navigateBack();
        return;
      }
      if (this.fallbackTabUrl) {
        uni.switchTab({ url: this.fallbackTabUrl });
      } else {
        uni.reLaunch({ url: '/pages/home/index' });
      }
    }
  }
}
</script>

<style scoped lang="scss">
.custom-nav-wrapper {
  width: 100%;
  /* #ifdef MP-WEIXIN */
  height: auto;
  /* #endif
  
  /* #ifndef MP-WEIXIN */
  height: 88rpx;
  /* #endif */
}

/* #ifdef MP-WEIXIN */
.mp-title {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  font-size: 28rpx;
  font-weight: 400;
  color: inherit;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400rpx;
  line-height: 1.2;
}

.mp-right-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  /* 确保右侧内容不被胶囊遮挡 */
  max-width: calc(100vw - 120rpx); /* 预留胶囊区域 */
}
/* #endif */
</style>


